import React, { Component } from 'react';
import axios from 'axios';
//!  1.引入prop-types 这个模块来校验参数
import Pts from "prop-types"
class Captcha extends Component {
    state = {
        imgUrl:''
    }
    // 设置默认props值
    static defaultProps = {
        w:'140px',
        h:'40px'
    }
    //!  2.设置校验规则   对父组件中传递过来的参数进行类型校验
    static propTypes = {
        // Pts表示 prop-types
        // func表示函数形式
        // isRequired表示必须要传的
        getKey:Pts.func.isRequired,
    }
    // 点击刷新验证码
    loadRefresh = ()=>{
        //点击时调用
        this.loadCaptcha()
    }
    // 验证码请求
    loadCaptcha = ()=>{
        axios.get('https://reactapi.iynn.cn/captcha/api/math').then(res=>{
            // console.log(res);
            this.setState({
                imgUrl:res.data.img
            },()=>{
                this.props.getKey(res.data.key)
            })
            // 写在上面的回调函数中更合适点，保证img更新以后才去存放对应的key值
            // console.log('子组件',this.props.getKey(res.data.key))
        }).catch(e=>{})
    }
    render() {
        return (
            <div onClick={this.loadRefresh}>
                <img src={this.state.imgUrl} width={this.props.w} height={this.props.h} />
            </div>
        );
    }
    componentDidMount(){
        // 初始化执行
        this.loadCaptcha()
    }
}

export default Captcha;
